<template>
  <section class="test-content " v-loading="loading" :element-loading-text="loadingText"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="classroom-main">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
        :center="true"
        :close-on-click-modal="false">
        <span style="text-align: center;font-size: 18px;">由于你离开次数太多，系统将在<span style="font-size: 20px;color: #FF0000;">{{daojishi}}</span>秒后强制交卷！！！</span>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
          <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
        </span>
      </el-dialog>

      <div class="topbar">
        <div class="login-box">
          {{webSiteSetings.websiteName}}
          <!-- <span class="main-title">{{webSiteSetings.websiteName}}</span> -->
         <!-- <span class="text">适用场景:企业培训 - 职业培训 - 继续教育</span> -->
        </div>
      </div>
      <div class="ex-info">
        <!-- <h3 class="title" v-html="title1"></h3> -->
        <div class="info-name" :title="examName" >{{examName}}</div>
        <div class="per-info">
          <span>姓名：{{info.name}}</span>
          <span>性别：{{info.sexLabel}}</span>
          <span>手机号：{{info.mobile}}</span>
        </div>
      </div>

      <div class="test-main">
        <div class="test-left">
          <div class="list-tpye" v-if="showtype=='1'">单选题</div>
          <div class="list-tpye" v-if="showtype=='2'">多选题</div>
          <div class="list-tpye" v-if="showtype=='3'">填空题</div>
          <div class="list-tpye" v-if="showtype=='4'">判断题</div>
          <div class="list-tpye" v-if="showtype=='5'">简答题</div>
          <div class="name"><span>{{listIndex+1}}、</span><span v-html="title"></span></div>
          <div class="test-all">
            <el-radio-group v-if="isShow1" v-model="radio" class="marn-radio" v-show="type=='1' || type=='4'">
              <div class="dxt-main" v-for="(item,index) in list">
                <!-- <el-radio  :label="index" >{{item.label}}.{{item.old}}</el-radio> -->
                <el-radio  :label="index" ><span v-html="item.label"></span>.<span v-html="item.old"></span></el-radio>
              </div>
            </el-radio-group>
            <!-- (allTest[listIndex].answer) -->
            <div class="tkt-main" v-for="(item,index) in list" v-show="type=='3' || type=='5' ">
              <span class="name">({{index+1}})、</span>
              <!-- <el-input v-model="item.new"></el-input> -->
              <el-input v-model="item.new" v-if="type=='3'" class="main-txt"></el-input>
              <el-input v-model="item.new"  type="textarea" :rows="3" v-if="type=='5'" class="main-txt"></el-input>
            </div>
<!--            <div class="tkt-main" v-for="(item,index) in list" v-show="type=='3'">
              <h3 class="name">{{index+1}}.</h3>
              <el-input type="textarea" v-model="item.new" class="main-txt" rows="3"></el-input>
            </div>
 -->
            <el-checkbox-group v-model="checkList" class="marn-radio" v-show="type=='2'">
              <div class="dxt-main" v-for="(item,index) in list">
                <!-- <el-checkbox v-if="isShow" :label="item.label + '.' + item.old" ></el-checkbox> -->
                <el-checkbox :label="item.label + '.' + item.old" v-if="isShow"><span v-html="item.label"></span>.<span v-html="item.old"></span></el-checkbox>
              </div>

            </el-checkbox-group>


            <div style="clear:both"></div>
          </div>

          <div class="next" @click="next" v-show="(index+1)<zong && isnext && !issubmit">下一题<!-- <img  src="../../assets/image/jiazai.svg"  v-show="(index+1)<zong &&isnext && issubmit"/> --></div>
          <!-- <div class="next" v-show="(index+1)<zong &&isnext && issubmit"><img>div> -->
          <div class="next" @click="submit" v-if="(index+1)==zong">交卷</div>
        </div>
        <div class="test-right">
          <div class="card" v-if="danxuanList.length!=0">
            <div class="card-title"><img src="../../assets/image/danxuan.svg">单选题</div>
            <div class="card-content">
              <div class="card-item" v-if="!(index>danxuanIndex)" v-for="(item,index) in AllList" :class="item.addClass" @click="gotoOneSubject(index)">{{index+1}}</div>

            </div>
            <div style="clear:both"></div>
          </div>

          <div class="card" v-if="duoxuanList.length!=0">
            <div class="card-title"><img src="../../assets/image/duoxuan.svg">多选题</div>
            <div class="card-content">
              <div class="card-item" v-if="index>danxuanIndex && !(index>duoxuanIndex)" v-for="(item,index) in AllList" :class="item.addClass" @click="gotoOneSubject(index)">{{index+1}}</div>
            </div>
            <div style="clear:both"></div>
          </div>

          <div class="card" v-if="tiankongList.length!=0">
            <div class="card-title"><img src="../../assets/image/tiankong.svg">填空题</div>
            <div class="card-content">
              <div class="card-item" v-if="index>duoxuanIndex && !(index>tiankongIndex)" v-for="(item,index) in AllList" :class="item.addClass" @click="gotoOneSubject(index)">{{index+1}}</div>
            </div>
            <div style="clear:both"></div>
          </div>

          <div class="card" v-if="panduanList.length!=0">
            <div class="card-title"><img src="../../assets/image/panduan.svg">判断题</div>
            <div class="card-content">
              <div class="card-item" v-if="index>tiankongIndex && !(index>panduanIndex)" v-for="(item,index) in AllList" :class="item.addClass" @click="gotoOneSubject(index)">{{index+1}}</div>
            </div>
            <div style="clear:both"></div>
          </div>

          <div class="card" v-if="jiandaList.length!=0">
            <div class="card-title"><img src="../../assets/image/jianda.svg">简答题</div>
            <div class="card-content">
              <div class="card-item" v-if="index>panduanIndex && !(index>jiandaIndex)" v-for="(item,index) in AllList" :class="item.addClass" @click="gotoOneSubject(index)">{{index+1}}</div>
            </div>
            <div style="clear:both"></div>
          </div>

        </div>
        <div style="clear:both"></div>
      </div>
      <div class="ex-info">
        <div class="ques-info">
          <span>剩余时间:&nbsp;{{day}}天-{{hour}}时-{{min}}分-{{second}}秒&nbsp;</span>
          <span>总题:&nbsp;{{AllList.length}}&nbsp;题</span>
          <span>已答题:&nbsp;{{datiNum}}&nbsp;题</span>
          <div class="submit" @click="submit">交卷</div>
        </div>
      </div>
    </div>
  </section>


</template>

<script>
  import Cookies from 'js-cookie'
  import {Notification} from 'element-ui';
  import 'babel-polyfill'
  import Pagination from '@/components/pagination.vue'
  import nodata from '@/components/nodata.vue'
  import $ from "jquery"
  import Vue from "vue";
  export default {

    crollToTop: true,
    props: {

    },
    data() {
      return {
        isShow:true,
        isShow1:true,
        daojishi:10,
        dialogVisible: false,
        code:null,
        danxuanList: [],
        duoxuanList: [],
        tiankongList: [],
        panduanList: [],
        jiandaList: [],
        AllList: [],
        listIndex:0,
        danxuanIndex:'',
        duoxuanIndex:'',
        tiankongIndex:'',
        panduanIndex:'',
        jiandaIndex:'',
        showtype:'',
        info: [],
        loading: false,
        course: true,
        isnext: true,
        issubmit: false,
        zong: '',
        loadingText: '数据加载中',
        testList: [

        ],
        cardList: [

        ],
        content: {
          arr: []
        },
        title1: '',
        title: '',
        timeDate: 0,
        list: [],
        checkList: [],
        type: '2',
        allTest: [],
        indexMain: 0,
        index: 0,
        goods: true,
        radio: null,
        input: '',
        day: '',
        hour: '',
        min: '',
        timer: null,
        timer2:null,
        allTime: null,
        testEnd: false,
        second: '',
        curStartTime: '',
        id: '',
        kaoshiId: '',
        leavenum: 0,//切屏次数
        leaveTime: '',
        datiNum:0,
        qiepingNum:0,//可切屏次数
        daan:[],
        yemian:'',
        webSiteSetings:[],
        leaveFlag:'',
        date:'',
        now:'',
        endDate:'',
        end:'',
        leftTime:'',
        h:'',
        m:'',
        s:'',
        restartExam:false,
      }
    },


    created() {
      this.kaoshiId = this.$route.query.kaoshiId;
      this.id = this.$route.query.id;
      this.examName = this.$route.query.examName;
      if(this.$route.query.restartExam){
        this.restartExam = this.$route.query.restartExam;
      }else{
        this.restartExam = false
      }
    },
    mounted() {
      this.getId();
      this.getInfo();
      this.getwebSiteSetings();
      $('.el-scrollbar__wrap').animate({
        scrollTop: '0px'
      }, 0);
      //禁止页面右键菜单
      $(document).bind("contextmenu",
        function(){
            return false;
        }
      );
      //禁止f12打开开发者工具
      // document.onkeydown = function() {
      //   var e = window.event || arguments[0];
      //   if (e.keyCode == 123) {
      //       //alert("F12被禁用");
      //       return false;
      //   }
      // }

      window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
      window.localStorage.setItem("yemian", "2");
    },
    destroyed() {
      window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
      document.removeEventListener('visibilitychange', this.handleVisiable)
      // global.change('1')
    },
    beforeDestroy() {
      clearInterval(this.timer);
      this.timer = null;
      clearInterval(this.timer2);
      this.timer2 = null;
    },
    updated(){
      let that = this;
      if(!(that.danxuanIndex<that.listIndex)){
          that.showtype='1';
      }
      if(that.listIndex>that.danxuanIndex && !(that.listIndex>that.duoxuanIndex)){
        that.showtype='2';
      }
      if(that.listIndex>that.duoxuanIndex && !(that.listIndex>that.tiankongIndex)){
        that.showtype='3';
      }
      if(that.listIndex>that.tiankongIndex && !(that.listIndex>that.panduanIndex)){
        that.showtype='4';
      }
      if(that.listIndex>that.panduanIndex && !(that.listIndex>that.jiandaIndex)){
        that.showtype='5';
      }
    },
    methods: {
      beforeunloadFn(e) {
          console.log('刷新或关闭')
          window.localStorage.setItem("yemian", "1");
          window.opener.location.reload();
        },
       handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
            }
        ,
      submit() {
        // var that = this;
        // var len = that.cardList.length;

        if (this.datiNum<this.AllList.length-1) {
          this.$confirm('你当前题目尚未打完，交卷后将无法继续作答，是否交卷？', '提示', {
                cancelButtonText:'取消',
                confirmButtonText: '交卷',
                showCancelButton:true,
                showClose:false,
                closeOnClickModal:false,
                type: 'warning'
              }).then(() => {
                let myAnswer = this.dati();
                this.submitData(myAnswer, true);
                this.loading = true;
                this.loadingText = "数据提交中,请稍后..."
                console.log(33366)
                setTimeout(() => {
                 window.open('','_self');window.close();
                }, 800)
              }).catch(() => {

              });
        }else{
          this.$confirm('你已完成当前所有题目，是否交卷？', '提示', {
                cancelButtonText:'取消',
                confirmButtonText: '交卷',
                showCancelButton:true,
                showClose:false,
                closeOnClickModal:false,
                type: 'warning'
              }).then(() => {
                let myAnswer = this.dati();
                this.submitData(myAnswer, true);
                this.loading = true;
                this.loadingText = "数据提交中,请稍后..."
                console.log(33366)
                setTimeout(() => {
                window.open('','_self');window.close();
                }, 800)
              }).catch(() => {

              });
        }
      },
      handleVisiable(e) {
        if (e && e.target.visibilityState === 'hidden') {
          this.saveUserKaoshiLeaveCount();
        } else {
          let str = "你已离开当前页面" + this.leavenum + "次,当离开次数超过"+this.qiepingNum+"次时,系统将强制交卷！";
          Notification.warning({
            title: '提示',
            message: str
          })
          console.log(this.leavenum,111)
          console.log(this.qiepingNum,222)
          if(this.leavenum>this.qiepingNum){
            if(e){
              let myAnswer = this.dati();
              this.submitData(myAnswer, true);
            }
            this.dialogVisible = true;

            this.timer2 = setInterval(()=>{
                    this.daojishi--
                    if(this.daojishi===0){
                      this.dialogVisible = false;
                      // window.opener=null;
                      clearInterval(this.timer1)
                      clearInterval(this.timer2)
                      window.open('','_self');window.close();
                    }
                  },1000)

            // window.opener=null;window.open('','_self');window.close();
          }
        }
      },
      dati(){
        let obj = {};
        obj.examAnswer = this.allTest[this.index].examAnswer;
        obj.examType = this.allTest[this.index].examType;
        obj.id = this.allTest[this.index].id;
        obj.score = this.allTest[this.index].score;

        if (this.allTest[this.index].examType == "3" || this.allTest[this.index].examType == "5") {
          var arr = [];
          this.allTest[this.index].data.forEach((item, i) => {
            arr.push(item.new)
          })
          obj.newExamAnswer = arr.join(",");
        }

        if (this.allTest[this.index].examType == "1" || this.allTest[this.index].examType == "4") {
          var list = this.allTest[this.index].data;
          if (this.radio != null) {
            obj.newExamAnswer = list[this.radio].label;
          }

        }
        if (this.allTest[this.index].examType == "2") {
          // let daan = this.allTest[this.index].Answer.split(",");
          // let all = Index_label.split(",")
          var list = this.allTest[this.index].examLabel;
          var arr = [];
          this.list.forEach((item, i) => {
            this.checkList.forEach((item1, i1) => {
              let src = item1.substr(0,1)

              if(item.label == src){
                arr.push(src)
                obj.newExamAnswer = arr.join(",");
              }
            })
          })
        }
        return obj;
      },
      async next() {
        //判断答题记录是否为空，为空则不提交记录
        let myAnswer = this.dati();
        console.log(myAnswer,3333333)
        if(myAnswer.newExamAnswer==null){
          console.log("答题内容为空")
        }else{
          await this.submitData(myAnswer, false);
        }

        if((this.index+1)<this.allTest.length){
          this.listIndex++;
          this.index++;
          this.showShiti();
        }
      },

      async gotoOneSubject(num) {

        if(num != this.index){
          let myAnswer = this.dati();
          console.log( this.allTest[this.index],5678)
          console.log(myAnswer,2314)


          if(myAnswer.newExamAnswer==null){
            console.log("答题内容为空")
          }else{
            await this.submitData(myAnswer, false);
          }
          this.index = num;
          this.listIndex = num;
          this.showShiti();
        }

      },
      async getId() {
        let that = this;
        that.loading = true;
        await this.$axios.$post("/f/getPaperByKaoshi?id=" + this.kaoshiId)
          .then(function(response) {
            that.leaveFlag =response.data.leaveFlag;
            that.qiepingNum = response.data.leaveCount;
            var end = response.data.endTime;
            end = end.replace(/-/g, '/');
            var endTime = new Date(end).getTime()

            var time = endTime;
            that.allTime = response.data.educationPaper.testTimeSecond;
            var a = that.formatDate(time);
            that.curStartTime = a;
            that.countTime();
            that.showTime();

            that.getList();
            //判断用户离开几次,
            console.log(that.leaveFlag,777777777777)
            if(that.leaveFlag=='0'){
               document.addEventListener('visibilitychange', that.handleVisiable)
            }else{
              document.removeEventListener('visibilitychange', this.handleVisiable)
            }
            that.loading = false;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      //保存离开次数，调用一次增加一次
      saveUserKaoshiLeaveCount(){
      let that = this;
      this.$axios.$post("/f/saveUserKaoshiLeaveCount?id=" + this.id)
        .then(function(response) {
            that.leavenum = response.data;
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })

      },
      clearTest() {
        let that = this;
        this.$axios.$post("http://www.jzcqedu.com:8080/f/paper/clear_paper?paperId=" + this.$route.params.id)
          .then(function(response) {


          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },

      //替换当前页面的数据
      showShiti(){
          this.radio = null;
         // that.index = that.index + 1;
         if (this.index == this.zong) {
           this.isnext = false;
         }
         this.cardList.forEach((item, i) => {
           if (i == this.index) {
             item.addClass = "active-item"
           } else {
             item.addClass = ""
           }
         })

         this.type = this.allTest[this.index].examType;
         this.list = this.allTest[this.index].data;
         this.title = this.allTest[this.index].examQuestion;
         console.log(this.list,888555222)
         // this.daan = this.allTest[this.index].Answer;
         // this.$set(this.allTest[this.index][key], 'Answer', Answer)
         console.log(this.allTest,111111)
         console.log(this.AllList,666666)
      if(this.allTest[this.index].Answer!=null && this.allTest[this.index].Answer!=''&&this.allTest[this.index].Answer!='undefined')
      {
        let Index_label = this.allTest[this.index].Answer
        console.log(Index_label,9999999)
        if(this.type =='1' || this.type=='4'){
          this.list.forEach((item, i) => {
            item.ref = false;
            if(item.label == Index_label){
              this.radio = i;
            }
          })
          this.isShow1 = false;
          this.$nextTick(()=>{
            this.isShow1 = true;
          })
        }
        if(this.type =='2'){
          // let Index_label = this.allTest[this.index].Answer;
          let all = Index_label.split(",")
          let checkArr = []
          this.list.forEach((item, i) => {
            item.ref = false;
            for(let j=0;j<all.length;j++){
              if(all[j] == item.label){
                // console.log(all[j],333333333333)
                this.checkList.push(item.label + '.' + item.old);
              }
            }

          })
          this.isShow = false;
          this.$nextTick(()=>{
            this.isShow = true;
          })
        }
        if(this.type =='3' || this.type =='5'){
          // let Index_label = this.allTest[this.index].Answer;
         this.list.forEach((item, i) => {
           item.new = Index_label;
         })

        }
        this.$forceUpdate()
      }

      },
      async submitData(obj, b) {
        if (!Cookies.get("token")) {
          this.$router.push("/login");
          return;
        };
        this.issubmit = true;
        let that = this;
        await this.$axios.$post("/f/saveKaoshiExam?examId=" + obj.id + "&paperTime=" + this.timeDate + "&submitKaoshi=" + b +
            "&userAnswer=" + obj.newExamAnswer + "&userKaoshiId=" + this.id)
          .then(function(response) {
            if(!!obj.newExamAnswer){
              if(that.AllList[that.index].addClass==''){
                that.AllList[that.index].addClass='dawan'
                that.datiNum++;
              }
            }
             that.issubmit = false;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
            that.issubmit = false;
          })
      },
      nextA() {
        console.log(this.radio);
        if (this.radio == null) {
          Notification.warning({
            title: '提示',
            message: "请选择答案"
          })
          return;
        }
        var obj = {
          "educationExamSubjectList": [{
            "examAnswer": this.content.examAnswer,
            "newExamAnswer": this.cardList[this.indexMain].arr[this.radio].select,
            "examType": this.content.examType,
            "score": this.content.score
          }],
          "kaoshiId": this.$route.params.id
        };
        var that = this;
        this.$axios.$post("http://seed.ckwashington.com/admin/mini/exam/savePaperRecord", obj)
          .then(function(response) {
            console.log(response, 88998777)
            var len = that.cardList.length;
            if (that.indexMain + 1 == len) {
              that.$router.push("/mainAll/result/" + that.$route.params.id)
            } else {
              that.indexMain = that.indexMain + 1;
              that.content = that.cardList[that.indexMain];
              that.testList = that.content.arr;

              that.radio = null;
              if (that.indexMain + 1 == len) {
                that.isNext = false;
              }
              for (var i = 0; i < len; i++) {
                if (i == that.indexMain) {
                  that.cardList[i].addClass = "active-item"
                } else {
                  that.cardList[i].addClass = ""
                }
              }
            }

          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      formatDate(date) {
        date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        var h = date.getHours();
        var m1 = date.getMinutes();
        var s = date.getSeconds();
        m = m < 10 ? ("0" + m) : m;
        m1 = m1 < 10 ? ("0" + m1) : m1;
        d = d < 10 ? ("0" + d) : d;
        return y + "-" + m + "-" + d + " " + h + ":" + m1 + ":" + s;
      },
      countTime() {
        // 获取当前时间
        this.date = new Date()
        this.now = this.date.getTime()
        // 设置截止时间
        this.endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
        this.end = this.endDate.getTime()
        // 时间差
        this.leftTime =this.end - this.now
        // 定义变量 d,h,m,s保存倒计时的时间
        if (this.leftTime >= 0) {
          // 天
          this.day = Math.floor(this.leftTime / 1000 / 60 / 60 / 24)
          // 时
          this.h = Math.floor(this.leftTime / 1000 / 60 / 60 % 24)
          this.hour = this.h < 10 ? '0' + this.h : this.h
          // 分
          this.m = Math.floor(this.leftTime / 1000 / 60 % 60)
          this.min = this.m < 10 ? '0' + this.m : this.m
          // 秒
          this.s = Math.floor(this.leftTime / 1000 % 60)
          this.second = this.s < 10 ? '0' + this.s : this.s
        } else {
          this.day = 0
          this.hour = '00'
          this.min = '00'
          this.second = '00'

        }
      },
      //设置每秒调用此函数
      showTime() {
        this.timer = setInterval(() => {
          this.countTime();
          if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
              clearInterval(this.timer1);
              // let myAnswer = this.dati();
              // this.submitData(myAnswer, true);

              this.dialogVisible = true;

              this.timer2 = setInterval(()=>{
                      this.daojishi--
                      if(this.daojishi===0){
                        this.dialogVisible = false;
                        // window.opener=null;
                        clearInterval(this.timer1);
                        clearInterval(this.timer2)
                        window.open('','_self');window.close();
                      }
                    },1000)
          }
        }, 1000)
      },
      goContent(item) {
        //this.$router.push("/mainAll/teacherContent")
      },
      getInfo() {
        let that = this;
        this.$axios.$post("/f/getUserKaoshi?id="+this.id)
          .then(function(response) {
            let data = response.data;
            console.log(data,8888)
            that.info = data.educationUser;
            that.leavenum = data.leaveCount;
            that.qiepingNum = data.educationKaoshi.leaveCount
            if(that.leavenum>that.qiepingNum){
              that.handleVisiable();
            }

          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      async getList(restartExam) {
        let that = this;

        this.$axios.$get("/f/examByKaoshiId?kaoshiId=" + this.kaoshiId)
          .then(async function(response) {
            let list = response.data;
            for(var key in list){
                var key = key;
                var value = list[key];
                if(key=='1'){
                  that.danxuanList = value;
                }
                if(key=='2'){
                   that.duoxuanList = value;
                }

                if(key=='3'){
                   that.tiankongList = value;
                }
                if(key=='4'){
                   that.panduanList = value;
                }
                if(key=='5'){
                   that.jiandaList = value;
                }
            }

            that.AllList = that.AllList.concat(that.danxuanList).concat(that.duoxuanList).concat(that.tiankongList)
            .concat(that.panduanList).concat(that.jiandaList)

            let all = that.AllList
            that.allTest = all;
            // that.daan = that.AllList;

            await that.getUserKaoshiExam(that.restartExam);


            //记录四种题型在list中的位置
            that.danxuanIndex = that.danxuanList.length-1;
            that.duoxuanIndex = that.danxuanIndex + that.duoxuanList.length;
            that.tiankongIndex = that.duoxuanIndex + that.tiankongList.length;
            that.panduanIndex = that.tiankongIndex + that.panduanList.length
            that.jiandaIndex = that.panduanIndex + that.jiandaList.length

            let shiti = that.AllList;
            // console.log(that.AllList, 77777)
            if (shiti.length != 0) {
              that.title1 = shiti.content;
              that.zong = shiti.length;
              let data = shiti;
              let arr = [];
              let arr1 = [];

              if (data.length != 0) {
                data.forEach((item, i) => {
                  var listObj = {}
                  if (i == 0) {
                    listObj.addClass = "active-item"
                  } else {
                    listObj.addClass = ""
                  }
                  arr1.push(listObj);
                  item.examQuestion = item.content;
                  item.examAnswer = item.educationExamOptionList;

                  // item.examLabel = item.educationExamSubject.examLabel;
                  item.examStem = item.educationExamOptionList;
                  let obj = {};
                  obj.examQuestion = item.content;
                  obj.examAnswer = item.examAnswer;
                  // console.log(obj.examAnswer,121366);
                  // debugger;
                  obj.examType = item.examType;
                  // obj.examLabel = item.educationExamSubject.examLabel;
                  obj.id = item.id;
                  obj.score = item.score;
                  if (item.examType == "3" || item.examType == "5") {
                    let arr1 = [];
                    let data1 = item.educationExamAnswerList;
                    if (data1.length != 0) {
                      data1.forEach((item1, i1) => {
                        let obj1 = {};
                        obj1.old = "旧的";
                        obj1.new = "";
                        arr1.push(obj1)
                      })
                    }
                    obj.data = arr1;
                  }
                  if (item.examType == "1" || item.examType == "2" || item.examType == "4") {
                    let arr1 = [];
                    let data1 = item.examStem;
                    if (data1.length != 0) {
                      data1.forEach((item1, i1) => {
                        if (item1 != "") {
                          // console.log(item1, 22)
                          let obj1 = {};
                          obj1.old = item1.content;
                          obj1.new = "";
                          obj1.label = item1.label;
                          arr1.push(obj1)
                        }

                      })
                    }
                    obj.data = arr1;
                  }
                  arr.push(obj)
                })
                that.cardList = arr1;
                that.type = arr[0].examType;
                that.list = arr[0].data;
                that.title = arr[0].examQuestion;

                that.allTest = arr;
                await that.getUserKaoshiExam(that.restartExam);
                // that.AllList = arr;
              }
              that.loading = false;

              that.showShiti()

            }

          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      getwebSiteSetings(){
          let that = this;
          this.$axios.$get("/f/index")
          .then(function (response) {

              that.indexData = response.data;
              that.webSiteSetings = response.data.webSiteSetings;
              that.pageShow = true;

          })
          .catch(function (error) {
                // handle error
                console.log(error);
          })
      },
      getData() {
        var that = this;
        this.loading = true;
        this.$axios.$post('/f/getUserKaoshiExam?userKaoshiId=' + this.id +"&examId=" + this.examId)
          .then(function(response) {
            that.title = response.data.title;
            var data = response.data.educationExamSubjectList;
            var len = data.length;
            for (var i = 0; i < len; i++) {
              if (i == 0) {
                data[i].addClass = "active-item"
              } else {
                data[i].addClass = ""
              }
              that.content = data[0];
              that.testList = data[0].arr;
              data[i].list = data[i].examStem.split("~~~");
              data[i].list1 = data[i].examLabel.split(",");
              var len1 = data[i].list1.length;
              data[i].arr = [];
              for (var k = 0; k < len1; k++) {
                var obj = {};
                obj.name = data[i].list[k];
                obj.select = data[i].list1[k];
                data[i].arr.push(obj);
              }
            }
            that.cardList = data;
            that.loading = false;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
       async getUserKaoshiExam(restartExam){
        var that = this;
        // console.log(this.allTest,999)
        // this.daan = Object.assign(this.allTest, {});
        await this.$axios.$post('/f/listUserKaoshiExam?userKaoshiId=' + this.id + "&restartExam=" + restartExam)
          .then(function(response) {
            let data = response.data
            console.log(that.AllList,55555555555)

            for(let i =0;i<data.length;i++){
              for(let j=0;j<that.AllList.length;j++){
                if(data[i].examId == that.AllList[j].id){
                  if(data[i].userAnswer!=null && data[i].userAnswer!=''&&data[i].userAnswer!='undefined'){
                     that.$set(that.AllList[j],"addClass", 'dawan')
                     that.$set(that.allTest[j],"addClass", 'dawan')
                     if(that.datiNum<that.AllList.length){
                        that.datiNum++;
                     }

                  }else{
                    that.$set(that.AllList[j],"addClass", '')
                    that.$set(that.allTest[j],"addClass", '')
                  }
                  that.$set(that.AllList[j],"Answer", data[i].userAnswer)
                  that.$set(that.allTest[j],"Answer", data[i].userAnswer)
                }
              }
            }

          })
          .catch(function(error) {
            console.log(error);
          })
      }
    }
  }
</script>

<style lang="less">
  .test-content {
    width: 100%;
    float: left;
    min-height: 100vh;
    background-color: white;

    .tkt-main {
      width: 100%;
      margin-bottom: 8px;
      float: left;

      .name {
        margin: 20px 0 !important;
      }
    }

    .marn-radio {
      width: 100%;
      float: left;
    }

    .dxt-main {
      width: 100%;
      // height: 55px;
      min-height: 55px;
      background: #f8f8f8;
      margin-bottom: 8px;
      float: left;
      display: flex;
      align-items: center;
      padding-left: 12px;
      box-sizing: border-box;
      p{
        display: inline-block;
      }
      .el-radio {
        display: flex;
        align-items: center;

      }

      .el-checkbox {
        display: flex;
        align-items: center;
      }
    }

    .main-txt {
      width: calc(100% - 100px);
      margin-top: 4px;
    }

    .tkt-main .name {
      width: 50px !important;
      line-height: 10px;
      font-size: 12px;
    }

    .teacher-img {
      width: 100%;
      display: block;
    }

    .classroom-main {
      background-color: white;
      width: 1200px;
      margin: 0 auto;
      // border: 1px solid #0076ca;

      .topbar {
        width: 100%;
        height: 100px;
        background-color: #EFFAFF;

        .login-box {
          // position: relative;
          // top: 15px;
          // left: calc(50% - 300px);
          text-align: center;
          width: 100%;
          line-height: 100px;
          height: 100px;
          font-size: 32px;
          color: #0076ca;

          .logo {

            height: 60px;
            margin-top: 5px;
            float: left;

            cursor: pointer;
            margin-right: 10px;
          }

          .main-title {
            font-size: 32px;
            color: #0076ca;
            float: left;
          }

          .text {
            float: left;
            font-size: 16px;
            color: #444444;
          }
        }
      }

      .el-breadcrumb {
        margin: 30px 0;
        font-size: 15px;
        padding-left: 10px;
      }

      .ex-info {
        width: 100%;
        // height: 100px;
        color: white;
        font-size: 18px;
        background-color: #0076ca;

        .title {
          width: 100%;
          height: 60px;
          padding-left: 40px;
          line-height: 60px;
          // background-color: red;
        }
        .info-name{
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 40px;
          width: 100%;
          height: 40px;
          padding-left: 40px;
          font-size: 24px;
          font-weight: bold;
        }
        .per-info {
          // background-color: goldenrod;
          line-height: 40px;
          width: 100%;
          height: 40px;
          padding-left: 40px;

          span {
            margin-right: 50px;
          }
        }

        .ques-info {
          line-height: 60px;
          width: 100%;
          height: 60px;
          padding-left: 40px;

          span {
            margin-right: 50px;
          }

          .submit {
            float: right;
            margin-right: 360px;
            margin-top: 10px;
            background-color: blue;
            display: inline-block;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            color: #fff;
            background: #ffa724;
            cursor: pointer;
          }
        }
      }

      .test-main {
        width: 100%;
        background-color: #EFFAFF;
        border-left: 1px #0076ca solid;
        border-right: 1px #0076ca solid;
        // margin-bottom:80px;
        .test-right {
          width: calc(100% - 902px);
          float: right;
          // background-color: #EFFAFF;
            // margin-top: -40px;
            .card {
              width: 100%;
              border-bottom: 1px dashed #dfdfdf ;
              padding-bottom: 5px;
              // box-shadow: 0 0px 7px #c7cac7;
              // margin-top:15px;
              // padding-top:15px;
              .card-content {
                width: 100%;
                // margin-top:10px;
                padding: 10px;
                float: left;
                background-color: #EFFAFF;

                .card-item {
                  cursor: pointer;
                  width: 25px;
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                  margin-right: 5px;
                  float: left;
                  font-size: 14px;
                  color: #222222;
                  border: 1px solid #0076ca;
                  box-sizing: border-box;
                  background-color: white;
                  margin-bottom:5px;
                }
                .dawan{
                  color: white;
                  background-color: #0076ca;
                }

                .active-item {
                  background: #0962a8;
                  border: 0;
                  color: #fff;
                }
              }

              .card-title {
                color: #0076ca;
                width: 100%;
                line-height: 40px;
                padding-left: 10px;
                // border-left:3px solid #0962a8;
                box-sizing: border-box;
                height: 40px;
                font-size: 18px;
                text-align: left;
                font-weight: bold;
                display: flex;
                align-items: center;
                img{
                  height:20px;
                  margin-right: 5px;
                }
              }
            }

            .time {
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 16px;
              color: #222222;
              width: 100%;
              box-shadow: 0 0px 7px #c7cac7;
            }
        }

        .test-left {
          border-right: 1px #dfdfdf dashed;
          // border-left: 1px #0076ca solid;
          background-color: white;
          width: 900px;
          float: left;
          padding: 30px;
          // box-shadow: 0 0px 7px #c7cac7;
          .list-tpye{
            width: 100%;
            height:40px;
            line-height: 40px;
            font-weight: bold;
            // background-color: #dcdcdc;
            color: #a59aa0;
            font-size: 16px;
            padding-left:20px;
          }
          .name {
            // background-color: #EFFAFF;
            width: 100%;
            line-height: 30px;
            height: 30px;
            padding-left: 20px;
            text-align: left;
            font-size: 16px;
            color: #777777;
            font-weight: 500;
            // background: #ffffff;
            span{
              float: left;
            }
          }

          .next {
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            background: #0076ca;
            margin: 20px auto;
            cursor: pointer;
            img{
               height: 20px;
               width: 20px;
               margin-left: 10px;
               position: relative;
               top: 3px;
            }
          }

          .test-all {
            width: 100%;
            background: #fff;

            .el-radio-group {
              // background-color: #EFFAFF;
              width: 100%;
              padding: 0 20px;

              .el-radio {
                color: #606266;
                cursor: pointer;
                margin-right: 30px;
                width: 100%;
                height: 55px;
                text-align: left;

                // .el-radio__label {
                //   line-height: 55px;
                // }
              }
            }
          }
        }
      }
    }

    .loadmore {
      font-size: 16px;
      padding: 14px 30px;
      margin-bottom: 120px;
      margin-top: 70px;
    }

    .teacher-main {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 1200px;
      margin: 0 auto;

      .teacher-item {
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
        cursor: pointer;
        background: #ffffff;
        border-radius: 5px;
        width: 280px;
        height: 130px;
        margin-bottom: 30px;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
</style>
